{% if latest_question_list %}
    <div class="container py-5">
        <div class="row justify-content-center">
            <div class="col-lg-8 col-md-10">
                <h2 class="text-center mb-4 text-primary">最新投票</h2>
                <div class="voting-list">
                    {% for question in latest_question_list %}
                    <div class="vote-item bg-primary bg-opacity-10 border border-primary border-opacity-25 rounded-4 p-4 mb-3">
                        <a href="{% url 'polls:detail' question.id %}" class="text-decoration-none">
                            <div class="d-flex justify-content-between align-items-center">
                                <h5 class="mb-0 text-dark">{{ question.question_text }}</h5>
                                <span class="badge bg-primary bg-opacity-25 text-primary rounded-pill px-3 py-2">
                                    {{ question.choice_set.count }} 选项
                                </span>
                            </div>
                        </a>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
{% else %}
    <div class="container py-5">
        <div class="row justify-content-center">
            <div class="col-lg-6 text-center py-5">
                <div class="empty-state bg-primary bg-opacity-10 rounded-4 p-5 mb-4">
                    <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-primary">
                        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
                    </svg>
                    <h4 class="text-primary mt-3 mb-3">当前没有可用的投票</h4>
                    <a href="{% url 'polls:index' %}" class="btn btn-primary px-4 py-2 rounded-pill">
                        返回首页
                    </a>
                </div>
            </div>
        </div>
    </div>
{% endif %}

<style>
    body {
        background-color: #f8fbfe;
    }
    .vote-item {
        transition: all 0.3s ease;
    }
    .vote-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0, 123, 255, 0.1);
        background-color: rgba(0, 123, 255, 0.15) !important;
    }
    .rounded-4 {
        border-radius: 16px !important;
    }
    .text-primary {
        color: #0d6efd !important;
    }
    .bg-primary {
        background-color: #0d6efd !important;
    }
    .empty-state {
        border: 1px solid rgba(0, 123, 255, 0.2);
    }
    .btn-primary {
        background-color: #0d6efd;
        border-color: #0d6efd;
    }
    .btn-primary:hover {
        background-color: #0b5ed7;
        border-color: #0b5ed7;
    }
</style>